<template>	
    <view>
        <view class="banner">
			<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586888700607&di=29f77f93b5065e103a878083aad26721&imgtype=0&src=http%3A%2F%2Fwww.gygx.net%2Fupload%2F201908%2F1565169912.jpeg"></image>
		</view>
        <van-tabs active="a">
			<van-tab title="杯类产品" name="a" class="wbb">
            <view class="box5">
				<view class="xrt" @click="gouwudingdan">
					<image src="http://5b0988e595225.cdn.sohucs.com/images/20180416/7b55b82ca5bd499895c3bf18744c8f92.jpeg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586947494959&di=78ff5791e8b19140c2d2afdc5a73caa4&imgtype=0&src=http%3A%2F%2Fwww.2ge.cn%2Fgroup1%2FM00%2F08%2FD9%2FwKgBPFxiKfaAdkd3AABhy44Z_fc379.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586947526101&di=80dbcc8554e22a4aaa84467f2842fbe6&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190517%2Fa11840c59d5f48cc87e16f9b230f7e08.png"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="http://5b0988e595225.cdn.sohucs.com/images/20180416/7b55b82ca5bd499895c3bf18744c8f92.jpeg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3412596018,893364832&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586947638051&di=ac4c9514698f19626381a30c7eca0d52&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw751h455%2F20180201%2F7721-fyrcsrw6939293.gif"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
		    </view>
			</van-tab>
			<van-tab title="包装类" name="b">
                <view class="box5">
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3924272597,379410470&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2149427490,3223021733&fm=15&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
		    </view>
			</van-tab>
            <van-tab title="手机壳" name="b">
                <view class="box5">
				<view class="xrt" @click="gouwudingdan">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586943332407&di=55245d08c9e165a4ab55c8285129ca57&imgtype=0&src=http%3A%2F%2Ffile01.16sucai.com%2Fd%2Ffile%2F2013%2F0604%2F20130604084057935.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1710640298,2212373629&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1189266825,2435879839&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				
		    </view>
			</van-tab>
            <van-tab title="其它周边" name="b">
                <view class="box5">
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3260610616,873267984&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2128045675,805447351&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
				<view class="xrt" @click="gouwudingdan">
					<image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=26646032,3981772758&fm=26&gp=0.jpg"></image>
					<text class="xrt_a">商品名称</text>
					<text class="xrt_b">2222人已购买</text>
					<text class="xrt_c">￥29.00</text>
					<view class="tianjia">
						<image src="../../../static/添加商品.png"></image>
					</view>
				</view>
		    </view>
			</van-tab>
		</van-tabs>
    </view>
</template>

<script>
export default {
    methods:{
			gouwudingdan(){
				// uni.switchTab({
				//     url: '/pages/indxe/spxq/spxq'
				// });
				uni.navigateTo({
				    url: '/pages/index/spxq/spxq'
				});
			}
		}
}
</script>

<style scoped>
    .banner image{
        width: 100%;
    }
    .box5 {
		display: flex;
		flex-wrap: wrap;
	}

	.xrt {
		width: 340rpx;
		height: 420rpx;
		background-color: #F8F8FF;
		display: flex;
		flex-direction: column;
		margin: 16rpx 16rpx 10rpx;
		border-radius: 20rpx;
	}

	.xrt image {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.tianjia {
		height: 0;
	}

	.tianjia image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 80%;
		position: relative;
		top: -30px;
		left: -10px;
		z-index: 999;
	}

	.xrt_a {
		font-size: 16px;
		margin: 16rpx 16rpx 10rpx 0;
	}

	.xrt_b {
		font-size: 12px;
		color: #888888;
		margin-left: 8rpx;
	}

	.xrt_c {
		margin: 16rpx 16rpx 10rpx 0;
		font-size: 16px;
		color: #d81e06;
		width: 50%;
	}

</style>